<template>
  <vxe-grid
    ref="xGrid"
    v-bind="$attrs"
    :empty-render="{ name: 'NotData' }"
    v-on="$listeners"
  >
    <template #time="{ field, data, item: { title } }">
      <el-date-picker
        v-model="data[field]"
        type="datetime"
        style="width: 100%"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        :placeholder="'请选择' + title"
        :default-time="field === 'from' ? '00:00:00' : '23:59:59'"
      />
    </template>
    <template #slot-scope="{ column, row }">
      <dict-tag :options="dict[column.params]" :value="row[column.field]" />
    </template>

    <template #slot-select="{ column, row }">
      {{
        $store.state.cache[column.params].map[row[column.field]] ||
        row[column.field]
      }}
    </template>

    <template #slot-time="{ row, column }">
      {{ parseTime(row[column.field], 'YYYY-MM-DD HH:mm:ss') }}
    </template>
    <template v-for="(val, key) in $scopedSlots" #[key]="scope">
      <slot :name="key" v-bind="scope" />
    </template>
  </vxe-grid>
</template>

<script>
  import sleep from '@/utils/sleep'
  export default {
    data() {
      return {
        dict: {},
      }
    },
    mounted() {
      this.$nextTick(async () => {
        this.initDict()
        await sleep(500)
        this.initDict()
      })
    },
    methods: {
      initDict() {
        this.dict = this.$store.state.dict.dict.reduce((pre, curr) => {
          pre[curr.key] = curr?.value.map((item) => ({
            label: item.dictLabel,
            value: item.dictValue,
            raw: item,
          }))
          return pre
        }, {})
      },
    },
  }
</script>

<style lang="scss" scoped></style>
